<template>
  <div class="side">
    <div class="eside">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          @click="onChange(index)"
          :title="item.name"
          :key="item.id"
          v-for="(item, index) in asideCont"
        >
          <div class="box"></div>
        </van-sidebar-item>
      </van-sidebar>
    </div>

    <div class="content">
      <van-tabs v-model="active">
        <!-- 双层循环： -->
        <!-- 循环likeCont数组： -->
        <van-tab v-for="item in likeCont" :key="item.id" :title="item.name">
          <ul>
            <!-- 循环likeCont内products数组： -->
            <li v-for="items in item.products" :key="items.id">
              <div class="goods_lis">
                <img :src="items.small_image" alt="" />
                <div class="text_goods">
                  <p class="title_goods">{{ items.name }}</p>
                  <p class="js_goods">{{ items.spec}}</p>
                  <div class="price_goods" style="font-weight: bold">
                    ￥{{ items.price }}
                    <span class="spa" style="font-weight: normal; color: #999"
                      >￥{{ items.origin_price }}</span
                    >
                    <div class="shop_icon">
                      <van-icon @click="onAdd()" name="shopping-cart-o" class="shop_icon" />
                    </div>
                  </div>
                  <p></p>
                </div>
              </div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
  name: "AsideCheck",
  data() {
    return {
      active: 2,
      activeKey: 0,
      //侧边栏数据
      asideCont: [],
      //猜你喜欢商品信息：
      likeCont: [],
      //声明一个变量存放json数据
      //这里设置显示页面时默认显示第一个分类
      lis: "lk001",
    };
  },
  async created() {
    //侧边栏数据
    let res = await this.$http.getcateApi();
    this.asideCont = res.data.data.cate;
    //商品内容数据，在刷新页面时默认第一个分类显示
    this.$http.getCateTextApi(this.lis).then((res) => {
      this.likeCont = res.data.data.cate;
    });
  },
  methods: {
    onChange(index) {
      console.log(index);
      //因为json数据中没有lk000所以为了对应上就要+1
      let arr = index + 1;
      console.log(arr);
      //三目运算符 拼接成json数据地址
      let lis = index + 1 >= 10 ? "lk0" + arr : "lk00" + arr;
      console.log(lis);
      //请求商品数据
      this.$http.getCateTextApi(lis).then((res) => {
        this.likeCont = res.data.data.cate;
        // console.log(l)
      });
    },
    onAdd(){
      Toast('成功加入购物车');
    }
  },
};
</script>

<style lang="scss" scoped>
.side {
  width: 7.5rem;
  display: flex;
  justify-content: space-between;
}
.eside{
  width:3rem;
  height: 100vh;
}
.van-sidebar{
  // position: fixed;
  left:0;
  top:0;
}
.van-sidebar-item {
  width: 1.8rem;
}
.content {
  width: 100%;
}
.van-tabs .van-tab--active {
  color: #42b95f;
}
li {
  width: 5.5rem;
  height: 2rem;
  padding: 0.2rem;
  border-bottom: 0.02rem solid #ccc;
  background: #fff;
  .goods_lis {
    display: flex;
    justify-content: space-between;
    .title_goods {
      color: #000;
      font-size: 0.35rem;
      margin-top: 0.1rem;
      margin-left: 0.2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //使用自适应布局
      line-clamp: 2;
      -webkit-line-clamp: 1; //设置超出行数，要设置超出几行显示省略号就把这里改成几
      -webkit-box-orient: vertical;
    }
    .shop_icon{
      // width:.8rem;
      height:.8rem;
      display: block; 
    }
    .price_goods {
      font-size: 0.32rem;
      color: rgb(223, 50, 50);
      font-weight: bold;
      margin-left: 0.18rem;
      margin-top: 0.2rem;

      .spa {
        font-size: 0.3rem;
        text-decoration: line-through;
      }
    }
    img {
      width: 1.8rem;
      height: 1.8rem;
      margin-left: 0.08rem;
    }
    .js_goods {
      font-size: 0.3rem;
      color: #888;
      margin-left: 0.2rem;
      margin-top: 0.05rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //使用自适应布局
      line-clamp: 2;
      -webkit-line-clamp: 1; //设置超出行数，要设置超出几行显示省略号就把这里改成几
      -webkit-box-orient: vertical;
    }
  }
  .van-icon {
    float: right;
    color: #42b95f;
    font-size: 0.5rem;
  }
}
</style>